<template>
  <div @click="onClick">
    <div v-if="isActive" class="tab_bar_item_icon">
      <slot name="icon_active"></slot>
    </div>
    <div v-else class="tab_bar_item_icon">
      <slot name="icon"></slot>
    </div>
    <div :class="isActive?'tab_bar_item_title_active':'tab_bar_item_title'">
      <slot name="title"></slot>
    </div>
  </div>
</template>

<script>

export default {
  props:{
    path:{
      type:String,
      required:true,
    }
  },
  methods:{
    onClick(){
      this.$router.push(this.path);
    }
  },
  computed:{
    isActive:function(){
      return this.path===this.$route.path;
    }
  }
}
</script>

<style scoped>
.tab_bar_item_icon{
	text-align: center;
	}
.tab_bar_item_icon img
{
  width: 24px;
  height: 24px;
}

.tab_bar_item_title
{
  font-size:0.5rem;
  color: #333333;
}

.tab_bar_item_title_active
{
  font-size:1px;
  color:#d81e06;
}
</style>
